<template>
  <div style="padding: 20px;">
    <h1>地图测试页面</h1>
    <div ref="mapContainer" style="width: 800px; height: 600px; border: 1px solid #ccc;"></div>
    <div style="margin-top: 20px;">
      <button @click="loadMap">加载地图</button>
      <button @click="testEcharts">测试ECharts</button>
    </div>
    <div id="debugInfo" style="margin-top: 20px; background: #f0f0f0; padding: 10px;">
      <h3>调试信息</h3>
      <pre id="debugText"></pre>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import xuzhouGeoJson from '@/utils/xuzhou.json'

const mapContainer = ref(null)

const log = (message) => {
  const debugText = document.getElementById('debugText')
  if (debugText) {
    debugText.textContent += message + '\n'
  }
  console.log(message)
}

const testEcharts = () => {
  log('=== 测试ECharts ===')
  log('ECharts版本: ' + echarts.version)
  log('xuzhouGeoJson存在: ' + !!xuzhouGeoJson)
  log('xuzhouGeoJson类型: ' + typeof xuzhouGeoJson)
  if (xuzhouGeoJson) {
    log('xuzhouGeoJson.features数量: ' + (xuzhouGeoJson.features ? xuzhouGeoJson.features.length : '无features'))
  }
}

const loadMap = () => {
  log('=== 开始加载地图 ===')
  
  if (!mapContainer.value) {
    log('错误: 找不到容器')
    return
  }
  
  try {
    log('创建ECharts实例...')
    const chart = echarts.init(mapContainer.value)
    
    log('注册地图...')
    echarts.registerMap('xuzhou', xuzhouGeoJson)
    
    const testData = [
      { name: '鼓楼区', value: 45 },
      { name: '云龙区', value: 67 },
      { name: '泉山区', value: 89 }
    ]
    
    const option = {
      title: { text: '徐州地图测试', left: 'center' },
      series: [{
        type: 'map',
        map: 'xuzhou',
        data: testData,
        label: { show: true }
      }]
    }
    
    log('应用配置...')
    chart.setOption(option)
    log('地图加载完成！')
    
  } catch (error) {
    log('错误: ' + error.message)
    console.error(error)
  }
}

onMounted(() => {
  log('测试页面已加载')
  log('请按以下按钮测试:')
  log('1. 先点击"测试ECharts"检查基础环境')
  log('2. 再点击"加载地图"测试地图功能')
})
</script>